<template>
  <div>
    <div
      class="main"
      :style="{
        background: curSkin.background,
      }"
    >
      <!-- 封面 -->
      <div class="cover" v-if="coverB" :style="{ color: curSkin.conColor }">
        <div class="coverH">
          <i class="lt"></i>
          <i class="rt"></i>
          <i class="rb"></i>
          <i class="lb"></i>
          <!-- 内容 -->
          <div class="imgs">
            <img :src="bookInfo.cover | imgUrl" alt="" />
          </div>
          <h1>{{ bookInfo.title }}</h1>
          <p>{{ bookInfo.author }} 著</p>
          <div class="info">
            <li>
              <h4>{{ bookInfo.majorCate }}</h4>
              <span>类型</span>
            </li>
            <li>
              <h4>{{ bookInfo.updated | time }}</h4>
              <span>最后更新</span>
            </li>
            <li>
              <h4>{{ bookInfo.wordCount | count }}万</h4>
              <span>连载（字）</span>
            </li>
          </div>
          <div class="copyright">
            <p>{{ bookInfo.copyrightDesc }}</p>
            <span>©版权所有 侵权必究</span>
          </div>
        </div>
      </div>
      <!-- 小说内容 -->
      <div class="content">
        <!-- 章节标题 -->
        <div class="top" :style="{ color: curSkin.color }">
          {{ chapter.title }} <span>{{ bookInfo.title }}</span>
        </div>
        <article class="article">
          <div
            class="ul"
            :style="{
              transform: 'translateX(' + tsfX * (curpages - 1) + 'vw)',
              color: curSkin.conColor,
              fontSize: 1 * ($store.state.size / 100) + 'rem',
            }"
            ref="ul"
          >
            <h3>{{ chapter.title }}</h3>
            <p v-for="(item, index) in chapter.cpContent" :key="index">
              {{ item.replace(/\s+/g, "") }}
            </p>
          </div>
        </article>
        <!-- 页数信息 -->
        <div class="pages" :style="{ color: curSkin.color }">
          {{ curpages }}/{{ allpages }}
        </div>
      </div>
      <!-- 页面控制 -->
      <div class="opt" ref="opt" v-on="{ touchend: end }"></div>
      <!-- 上边设置 -->
      <div :class="['optTop', { active: menuB }]">
        <div class="back" @click="$router.back()">
          <span class="iconfont icon-fanhui-xianxing"></span>
        </div>
        <div class="fun">
          <!-- <span class="iconfont icon-dashang"></span> -->
          <span class="iconfont icon-dingyue1"></span>
          <span class="iconfont icon-gengduo-a" @click="moreB = !moreB"></span>
        </div>
        <!-- 三点 更多 -->
        <div class="moreBtn" v-show="moreB">
          <ul>
            <li
              @click="
                $router.push({ path: '/details', query: { id: bookInfo._id } })
              "
            >
              <span class="iconfont icon-shujixiangqing"></span> 书籍详情
            </li>
            <li @click="$router.push({ path: '/bookshelf' })">
              <span class="iconfont icon-shujia"></span> 返回我的书架
            </li>
          </ul>
        </div>
      </div>
      <!-- 下边设置 -->
      <div :class="['optBottom', { active: menuB }]">
        <div class="ul">
          <li @click="current">
            <span class="iconfont icon-menu"></span>
            <p>目录</p>
          </li>
          <li
            @click="
              speedB = !speedB;
              setUp = false;
            "
            :class="{ active: speedB }"
          >
            <span class="iconfont icon-jihuajindu"></span>
            <p>进度</p>
          </li>
          <li
            @click="
              setUp = !setUp;
              speedB = false;
            "
            :class="{ active: setUp }"
          >
            <span class="iconfont icon-ziti1"></span>
            <p>设置</p>
          </li>
          <li @click="setSkin('atnight')" v-if="sky">
            <span class="iconfont icon-yejian"></span>
            <p>夜间</p>
          </li>
          <li @click="setSkin('daytime')" v-if="!sky">
            <span class="iconfont icon-yejian"></span>
            <p>日间</p>
          </li>
        </div>
        <!-- 设置界面 -->
        <div class="setUp" v-show="setUp">
          <div class="top">
            <span @click="setSize(false)">A-</span>
            <div>
              <van-slider
                v-model="$store.state.size"
                active-color="#ee0a24"
                inactive-color="rgba(255,255,255,.2)"
                :step="8"
                max="112"
                min="40"
                @change="changeSize"
              >
                <template #button>
                  <div class="custom-button"></div>
                </template>
              </van-slider>
            </div>
            <span @click="setSize(true)">A+</span>
          </div>
          <div class="bottom">
            <div @click="setbackC(back)">
              <span
                class="iconfont icon-xuanzhong"
                v-show="backC == back"
              ></span>
            </div>
            <div @click="setbackC('#cad9e8')">
              <span
                class="iconfont icon-xuanzhong"
                v-show="backC == '#cad9e8'"
              ></span>
            </div>
            <div @click="setbackC('#d1edd1')">
              <span
                class="iconfont icon-xuanzhong"
                v-show="backC == '#d1edd1'"
              ></span>
            </div>
            <div @click="setbackC('#e6e6e6')">
              <span
                class="iconfont icon-xuanzhong"
                v-show="backC == '#e6e6e6'"
              ></span>
            </div>
          </div>
        </div>
        <!-- 进度界面 -->
        <div class="speedB" v-show="speedB">
          <div class="top">
            <div class="left" @click="prev">
              <span class="iconfont icon-arrow-left-bold"></span>上一章
            </div>
            <div class="mid">
              <p>{{ chapter.title }}</p>
              <em>{{ percent }}%</em>
            </div>
            <div class="right" @click="next">
              下一章<span class="iconfont icon-arrow-right-bold"></span>
            </div>
          </div>
          <div class="bottom">
            <van-slider
              v-model="order"
              active-color="#ee0a24"
              inactive-color="rgba(255,255,255,.2)"
              :max="count"
              min="1"
              @change="changeChapter"
            >
              <template #button>
                <div class="custom-button"></div>
              </template>
            </van-slider>
          </div>
        </div>
      </div>

      <!-- 目录 -->
      <van-popup
        v-model="cataB"
        position="right"
        :lazy-render="false"
        :style="{ height: '100%', width: '85%' }"
      >
        <div class="cataB">
          <div :class="['top', { active: !active }]">
            <div :class="{ active: active }" @click="active = true">目录</div>
            <div :class="{ active: !active }" @click="active = false">书签</div>
          </div>
          <div class="tit">
            <span>共{{ count }}章</span>
            <span class="fr" @click.stop="sort" v-if="sortflag">倒序</span>
            <span class="fr" @click.stop="sort" v-if="!sortflag">正序</span>
          </div>
          <p>正文卷</p>
          <div class="list" ref="list">
            <ul class="cataUl" v-if="!cataloading">
              <li
                v-for="(item, index) in cataData"
                :key="index"
                @click="toChapter(item.link, item.isVip, item.order)"
                :class="{ active: chapter.order == item.order }"
              >
                {{ item.title }}
                <span class="iconfont icon-suo" v-if="item.isVip"></span>
              </li>
            </ul>
            <div class="loading" v-if="cataloading">
              <van-loading type="spinner" />
            </div>
          </div>
          <!-- 定位按钮 -->
          <div class="location" @click="current"></div>
        </div>
      </van-popup>
      
      <van-overlay :show="overlay" z-index="999">
        <div class="wrapper">
          <van-loading type="spinner" color="#1989fa" />
        </div>
      </van-overlay>
    </div>
  </div>
</template>

<script>
import {
  getSources,
  getChapter,
  getbook,
  getBookinfo,
} from "../api/book/all.js";
export default {
  data() {
    return {
      id: null, // 当前书籍id
      bookInfo: { cover: "/" }, // 当前阅读书籍详情
      back:
        'url("/back.jpg") no-repeat center top/100%,url("/back.jpg") no-repeat center bottom/100%,#c4b395',
      tsfX: -97, // 偏移值 控制页面上下页 97的倍数 单位vw
      menuB: true, // 上下菜单按钮栏显示
      moreB: false, // 三点更多菜单显示
      setUp: false, // 设置显示
      speedB: false, // 进度显示
      coverB: true, // 封面显示
      cataB: false, // 目录盒子显示
      active: true, // 目录true 书签false显示
      sortflag: true, // 目录排序 true：正序
      curpages: 0, // 当前页数
      allpages: 17, // 页数总数
      cataData: null, // 所有章节数据
      count: 0, // 章节数量
      order: 1, // 当前章节数
      percent: null, // 章节百分比
      overlay: true, // 阅读界面的加载状态
      cataloading: true, // 目录盒子加载状态
      chapter: {
        title: null,
        cpContent: null,
        order: null,
      }, // 当前阅读小说
    };
  },
  methods: {
    end(event) {
      // 触摸结束事件
      // 三等分
      let k = parseInt(this.$refs.opt.offsetWidth / 3);
      let sx = event.changedTouches[0].clientX;
      if (sx < k + 10) {
        // 左边屏
        if (!this.menuB) {
          if (this.curpages > 1) {
            this.curpages -= 1;
          } else {
            if (this.order > 1) {
              // 跳转到上一章
              this.prev();
            } else {
              this.$toast({
                message: "已经是第一章了",
                className: "mytoast",
                closeOnClick: true,
              });
            }
          }
        } else {
          this.menuB = false;
        }
      } else if (sx > 2 * k - 10) {
        // 右边屏
        if (!this.menuB) {
          if (this.coverB) {
            this.coverB = false;
          }
          if (this.curpages < this.allpages) {
            // 下一页
            this.curpages += 1;
          } else {
            // 跳转到下一章
            if (this.order < this.count) {
              this.next();
            } else {
              this.$toast({
                message: "已阅读到最后一章",
                className: "mytoast",
                closeOnClick: true,
              });
            }
          }
        } else {
          this.menuB = false;
        }
      } else {
        // 设置
        // console.log("设置");
        this.menuB = !this.menuB;
        this.moreB = false;
        this.setUp = false;
        this.speedB = false;
      }
    },
    prev() {
      // 上一章
      this.$router.replace({
        path: "/reader",
        query: { id: this.id, order: this.order - 1 },
      });
      this.getBook(
        this.cataData[this.order - 2].link,
        this.cataData[this.order - 2].isVip
      );
    },
    next() {
      // 下一章
      this.$router.replace({
        path: "/reader",
        query: { id: this.id, order: this.order + 1 },
      });
      this.getBook(
        this.cataData[this.order].link,
        this.cataData[this.order].isVip
      );
    },
    toChapter(link, isVip, order) {
      // 跳转到指定章节 目录的
      if (!isVip) {
        this.$router.replace({
          path: "/reader",
          query: { id: this.id, order: order },
        });
      }
      this.getBook(link, isVip);
    },
    getData() {
      this.id = this.$route.query.id;
      // 获取当前阅读书籍详情
      getBookinfo(this.id).then((data) => {
        this.bookInfo = data;
        document.title = data.title;
      });
      // 获取书籍目录
      getSources(this.id)
        .then((data) => {
          return data[0]._id;
        })
        .then((id) => {
          getChapter(id)
            .then((data) => {
              if (data.chapters.length) {
                this.cataData = data.chapters;
                this.cataloading = false;
                this.count = data.chapters.length;
                return this.cataData;
              }
            })
            .then((data) => {
              // 读取上次读到的章节 或者第一章 这一步在详情上处理了
              this.order = this.$route.query.order - 0;
              this.getBook(data[this.$route.query.order - 1].link, false);
            });
        });
    },
    sort() {
      this.sortflag = !this.sortflag;
      this.cataData.reverse();
    },
    getBook(link, isVip) {
      if (this.$route.query.openCata) {
        // 判断是否是从目录的按钮进来的 是就显示目录
        this.cataB = true;
      } else {
        this.cataB = false;
      }
      this.overlay = true;
      getbook(link)
        .then((data) => {
          if (data.ok) {
            // console.log(data.chapter.cpContent);
            let str = data.chapter.cpContent;
            let order = data.chapter.order;
            let snsArr = str.split(/[(\r\n)\r\n]+/);
            snsArr.forEach((item, index) => {
              if (!item) {
                snsArr.splice(index, 1);
              }
            });

            // 保存到当前阅读小说变量 chapter
            this.chapter = {
              title: data.chapter.title,
              cpContent: snsArr,
              order: order,
            };

            // 记录读到第几章 记录到最近阅读的数据中 同时记录读到第几章的章节名
            if (this.$store.state.lately[0]) {
              let da = this.$store.state.lately[0];
              // 记录章节数 order是新创建的属性
              da.order = order;
              // 记录章节名 currenTit是新创建的属性
              da.currentTit = data.chapter.title;
              this.$store.commit("setLately", da);
            }
            // console.log(this.chapter);
          }
        })
        .then(() => {
         
          this.overlay = false;
          // 更新初始页码
          if (this.order == 1) {
            this.coverB = true;
            this.curpages = 0;
          } else {
            this.coverB = false;
            this.curpages = 1;
          }
        });
      if (isVip) {
        this.$toast({
          message: "vip内容,请充值",
          className: "mytoast",
          closeOnClick: true,
        });
      }
    },
    current() {
      this.cataB = true;
      // 定位当前阅读的章节
      this.$nextTick(() => {
        if (this.order > 3) {
          this.$refs.list.scrollTop =
            this.$refs.list.querySelector(".cataUl li").offsetHeight *
            (this.order - 1);
        }
      });
    },
    updatePages() {
      // 计算页数
      let allWidth = this.$refs.ul.scrollWidth;
      let width = this.$refs.ul.offsetWidth;
      let pages = allWidth / width;
      this.allpages = parseInt(pages);
    },
    setSkin(skin) {
      // 设置肤色
      this.$store.commit("setSkin", skin);
      // console.log(this.$store.state.skin);
    },
    setSize(flag) {
      // t 加 f 减
      let size = this.size;
      if (flag) {
        size = size < 112 ? size + 8 : size;
      } else {
        size = size > 40 ? size - 8 : size;
      }
      this.$store.commit("setSize", size);
    },
    changeSize(value) {
      // 改变字体大小
      this.$store.commit("setSize", value);
    },
    setbackC(color) {
      this.$store.commit("setbackC", color);
      // 自动调为日间模式
      if (!this.sky) {
        this.$store.commit("setSkin", "daytime");
      }
    },
    changeChapter(value) {
      this.$router.replace({
        path: "/reader",
        query: { id: this.id, order: value },
      });
      this.getBook(
        this.cataData[this.order].link,
        this.cataData[this.order].isVip
      );
      console.log(value);
    },
  },
  created() {
    // 获取目录数据
    this.getData();
  },
  computed: {
    curSkin() {
      return this.$store.state.skin[this.$store.state.curSkin];
    },
    sky() {
      // sky: true, // t日间 f夜间
      return this.$store.state.curSkin == "daytime"
        ? true
        : this.$store.state.curSkin == "atnight"
        ? false
        : false;
    },
    size() {
      // 字体大小
      return this.$store.state.size;
    },
    backC() {
      // 日间肤色
      return this.$store.state.skin.daytime.background;
    },
  },
  filters: {
    imgUrl(url) {
      if (url) {
        return "http://statics.zhuishushenqi.com" + url;
      } else {
        return "";
      }
    },
    count(num) {
      let w = (num / 10000).toFixed(2);
      return w;
    },
    time(date) {
      let time =
        new Date().getTime() - new Date((date || "").split(".")[0]).getTime();
      let hour = parseInt(time / 1000 / 60 / 60);
      let day = hour >= 24 ? parseInt(hour / 24) : 0;
      let year = day >= 365 ? parseInt(day / 365) : 0;
      let min = parseInt(time / 1000 / 60);
      let str =
        year != 0
          ? year + "年前"
          : day != 0
          ? day + "天前"
          : hour != 0
          ? hour + "小时前"
          : min != 0
          ? min + "分钟前"
          : "刚刚";
      return str;
    },
  },
  watch: {
    chapter(n) {
      this.$nextTick(() => {
        // 更新页码 根据当前阅读的小说章节内容更新而更新
        this.updatePages();
        this.order = n.order;
        this.percent = +((n.order / this.count) * 100).toFixed(1);
      });
    },
  },
  beforeDestroy() {
    let da = this.$store.state.lately[0];
    // 记录最后阅读时间
    da.lastReadTime = Date.now();
    this.$store.commit("setLately", da);
  },
};
</script>

<style lang="less" scoped>
.main {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  // background: #c4b395 url("../assets/images/back.jpg") repeat-y center 119px;
  background-size: 100%;
  .cover {
    height: 100%;
    padding: 0.390625rem;
    box-sizing: border-box;
    .coverH {
      text-align: center;
      position: relative;
      height: 100%;
      border: 1px solid rgba(0, 0, 0, 0.2);
      box-sizing: border-box;
      i {
        width: 0.3125rem;
        height: 0.3125rem;
        position: absolute;
        box-sizing: border-box;
        &::before {
          content: "";
          position: absolute;
          width: 0.15625rem;
          height: 0.15625rem;
          box-sizing: border-box;
          border: 1px solid rgba(0, 0, 0, 0.2);
        }
        &::after {
          content: "";
          position: absolute;
          width: 0.15625rem;
          height: 0.15625rem;
          box-sizing: border-box;
          // background-color: #c4b395;
          border: 1px solid rgba(0, 0, 0, 0.2);
        }
        &.lt {
          top: 0;
          left: 0;
          &::before {
            border-top-color: #c4b395;
            border-left-color: #c4b395;
            left: -1px;
            top: -1px;
          }
          &::after {
            right: 1px;
            bottom: 1px;
          }
        }
        &.rt {
          right: 0;
          &::before {
            border-top-color: #c4b395;
            border-right-color: #c4b395;
            right: -1px;
            top: -1px;
          }
          &::after {
            left: 1px;
            bottom: 1px;
          }
        }
        &.rb {
          right: 0;
          bottom: 0;
          &::before {
            border-bottom-color: #c4b395;
            border-right-color: #c4b395;
            right: -1px;
            bottom: -1px;
          }
          &::after {
            left: 1px;
            top: 1px;
          }
        }
        &.lb {
          left: 0;
          bottom: 0;
          &::before {
            border-bottom-color: #c4b395;
            border-left-color: #c4b395;
            left: -1px;
            bottom: -1px;
          }
          &::after {
            right: 1px;
            top: 1px;
          }
        }
      }
      .imgs {
        width: 100px;
        margin: 2rem auto 0.234375rem;
        border: 0.078125rem solid white;
        font-size: 0;
        img {
          width: 100%;
          height: auto;
        }
      }
      h1 {
        font-size: 0.6rem;
      }
      & > p {
        font-size: 0.390625rem;
        font-weight: 500;
        margin: 0.15625rem 0;
      }
      & > .info {
        display: flex;
        margin: 1.5rem 0 0 0;
        li {
          flex: 1;
          text-align: center;
          h4 {
            font-size: 0.390625rem;
            margin-bottom: 0.078125rem;
          }
          span {
            font-size: 0.34375rem;
            vertical-align: top;
          }
        }
      }
      .copyright {
        position: absolute;
        bottom: 0.15625rem;
        width: 100%;
        p {
          font-size: 0.3rem;
        }
        span {
          font-size: 0.3rem;
          vertical-align: top;
        }
      }
    }
  }
  .content {
    width: 100%;
    height: 100%;
    padding: 0.390625rem 0.390625rem 0 0.390625rem;
    box-sizing: border-box;
    position: relative;
    .top {
      font-size: 0.3125rem;
      span {
        float: right;
      }
    }
    .article {
      position: absolute;
      top: 1.2rem;
      bottom: 0.46875rem;
      left: 0.390625rem;
      right: 0.390625rem;
      .ul {
        height: 100%;
        column-width: 97vw;
        column-gap: 0.46875rem;
        transform: translateX(0px);
        transition: transform 0.2s;
        // transform: translateX(-97vw);
        color: rgba(255, 255, 255, 0.5);
        font-size: 0.5rem;
        h3 {
          font-weight: 500;
          margin: 0.46875rem 0;
        }
        p {
          text-align: justify;
          text-indent: 2em;
          line-height: 1.8;
        }
      }
    }
    .pages {
      position: absolute;
      bottom: 0;
      left: 0.390625rem;
      flex: 1;
      font-size: 0.3125rem;
      margin-bottom: 2px;
    }
  }
  .opt {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    z-index: 9;
  }
  .optTop {
    width: 100%;
    height: 1.25rem;
    background-color: rgba(0, 0, 0, 0.7);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    color: white;
    display: flex;
    justify-content: space-between;
    transform: translateY(-100%);
    transition: transform 0.2s;
    &.active {
      transform: translateY(0);
    }
    div {
      span {
        display: inline-block;
        width: 0.9375rem;
        height: 100%;
        line-height: 1.25rem;
        text-align: center;
        vertical-align: middle;
        font-size: 0.390625rem;
      }
    }
    .moreBtn {
      position: absolute;
      top: 100%;
      right: 0;
      width: 4.6rem;
      background-color: rgba(0, 0, 0, 0.7);
      ul {
        height: 2.6rem;
        display: flex;
        flex-direction: column;
        li {
          flex: 1;
          font-size: 0.390625rem;
        }
      }
    }
  }
  .optBottom {
    width: 100%;
    height: 1.25rem;
    background-color: rgba(0, 0, 0, 0.8);
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
    transition: transform 0.2s;
    transform: translateY(100%);
    .ul {
      color: rgba(255, 255, 255, 0.6);
      display: flex;
      height: 100%;
      li {
        flex: 1;
        text-align: center;
        font-size: 0;
        padding-top: 0.15625rem;
        box-sizing: border-box;
        span {
          font-size: 0.390625rem;
        }
        p {
          margin-top: 0.078125rem;
          font-size: 0.3125rem;
        }
        &.active {
          color: white;
        }
      }
    }
    &.active {
      transform: translateY(0);
    }
    // 设置盒子样式
    .setUp {
      position: absolute;
      bottom: 100%;
      left: 0;
      width: 100%;
      color: white;
      background-color: rgba(0, 0, 0, 0.8);
      padding: 0.390625rem;
      box-sizing: border-box;
      .top {
        display: flex;
        height: 46px;
        line-height: 46px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        span {
          flex: 0 0 40px;
          font-size: 0.4rem;
          text-align: center;
        }
        & > div {
          // line-height: 46px;
          flex: 1;
          padding: 0 0.15625rem;
          & > div {
            top: 50%;
            transform: translateY(-50%);
          }
        }
      }
      .bottom {
        display: flex;
        justify-content: space-between;
        padding: 0.390625rem 0 0;
        box-sizing: border-box;
        & > div {
          width: 20%;
          height: 36px;
          line-height: 36px;
          background-color: skyblue;
          text-align: center;
          font-size: 0;
          border-radius: 6px;
          span {
            color: #ee0a24;
          }
          &:nth-child(1) {
            background-color: #c4b395;
          }
          &:nth-child(2) {
            background-color: #cad9e8;
          }
          &:nth-child(3) {
            background-color: #d1edd1;
          }
          &:nth-child(4) {
            background-color: #e6e6e6;
          }
        }
      }
      // 滑块样式
      .custom-button {
        width: 0.3125rem;
        height: 0.3125rem;
        background-color: #ee0a24;
        border-radius: 50%;
      }
    }
    // 进度盒子样式
    .speedB {
      position: absolute;
      bottom: 100%;
      left: 0;
      width: 100%;
      color: white;
      background-color: rgba(0, 0, 0, 0.8);
      box-sizing: border-box;
      .top {
        display: flex;
        height: 46px;
        line-height: 46px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        padding: 0.390625rem .15625rem;
        & > div {
          font-size: 0.4rem;
        }
        .mid {
          flex: 1;
          text-align: center;
          font-size: 0.36rem;
          line-height: 1.5;
          padding: 0 5%;
          p {
            flex: 1;
            display: -webkit-box;
            text-overflow: ellipsis;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }
          em {
            flex: 1;
          }
        }
      }
      .bottom {
        padding: 0.8rem;
        box-sizing: border-box;
        .custom-button {
          width: 0.3125rem;
          height: 0.3125rem;
          background-color: #ee0a24;
          border-radius: 50%;
        }
      }
    }
  }
  .cataB {
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    .top {
      display: flex;
      height: 1.25rem;
      line-height: 1.25rem;
      text-align: center;
      border-bottom: 0.05rem solid rgba(170, 170, 170, 0.5);
      box-sizing: border-box;
      position: relative;
      &::after {
        content: "";
        position: absolute;
        height: 0.05rem;
        width: 50%;
        background-color: #f2767c;
        bottom: -0.05rem;
        left: 0%;
        transition: all 0.2s;
      }
      &.active {
        &::after {
          left: 50%;
        }
      }
      div {
        flex: 1;
        font-size: 0.4rem;
        color: #aaa;
        &.active {
          color: #f2767c;
        }
      }
    }
    .tit {
      height: 1rem;
      line-height: 1rem;
      padding: 0 0 0 0.46875rem;
      span {
        font-size: 0.390625rem;
        vertical-align: middle;
        &.fr {
          padding: 0 0.46875rem;
          float: right;
          &:active {
            background-color: #f2f2f2;
          }
        }
      }
    }
    p {
      width: 100%;
      height: 0.8rem;
      line-height: 0.9rem;
      font-size: 0.35rem;
      background-color: #f6f7f9;
      padding: 0 0.46875rem;
      color: #aaa;
      overflow: hidden;
      box-sizing: border-box;
    }
    .list {
      flex: 1;
      overflow-x: hidden;
      overflow-y: auto;
      display: block;
      // 修改滚动条样式
      &::-webkit-scrollbar {
        width: 10px;
        height: 10px;
      }
      &::-webkit-scrollbar-track {
        background: rgb(239, 239, 239);
        border-radius: 2px;
      }
      &::-webkit-scrollbar-thumb {
        background: #f2767c;
        border-radius: 10px;
      }
      ul {
        li {
          padding: 0 0.8rem 0 0.46875rem;
          font-size: 0.359375rem;
          height: 1rem;
          line-height: 1rem;
          border-bottom: 1px solid rgba(170, 170, 170, 0.2);
          box-sizing: border-box;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          &:active {
            background-color: #f2f2f2;
          }
          &.active {
            color: #f2767c;
          }
          span {
            float: right;
          }
        }
      }
      .loading {
        text-align: center;
        margin-top: 0.46875rem;
      }
    }
    .location {
      position: absolute;
      bottom: 0.5rem;
      right: 0.46875rem;
      width: 0.5rem;
      height: 0.5rem;
      border-radius: 50%;
      background-color: #f2767c;
      border: 0.15rem solid white;
      box-sizing: border-box;
      box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.425);
    }
  }
}
</style>